<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Job Details</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h1 class="mb-4">Job Details</h1>

    <div class="card">
        <div class="card-header">
            <h5 th:text="${job.jobName}"></h5>
        </div>
        <div class="card-body">
            <table class="table">
                <tr>
                    <th>ID</th>
                    <td th:text="${job.id}"></td>
                </tr>
                <tr>
                    <th>JAR Path</th>
                    <td th:text="${job.jarPath}"></td>
                </tr>
                <tr>
                    <th>Main Class</th>
                    <td th:text="${job.mainClass}"></td>
                </tr>
                <tr>
                    <th>Status</th>
                    <td>
                            <span th:switch="${job.status}"
                                  th:text="${job.status}">
                                <span class="badge bg-primary" th:case="'RUNNING'"></span>
                                <span class="badge bg-success" th:case="'COMPLETED'"></span>
                                <span class="badge bg-danger" th:case="'FAILED'"></span>
                                <span class="badge bg-secondary" th:case="'SCHEDULED'"></span>
                                <span class="badge bg-warning" th:case="*"></span>
                            </span>
                    </td>
                </tr>
                <tr>
                    <th>Schedule</th>
                    <td th:text="${job.scheduleExpression} ?: 'Manual'"></td>
                </tr>
                <!-- <tr>
                     <th>Created At</th>
                     <td th:text="${#temporals.format(job.createdAt, 'yyyy-MM-dd HH:mm:ss')}"></td>
                 </tr>
                 <tr th:if="${job.startTime != null}">
                     <th>Start Time</th>
                     <td th:text="${#temporals.format(job.startTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                 </tr>
                 <tr th:if="${job.endTime != null}">
                     <th>End Time</th>
                     <td th:text="${#temporals.format(job.endTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                 </tr>
                 <tr th:if="${job.errorMessage != null}">
                     <th>Error Message</th>
                     <td class="text-danger" th:text="${job.errorMessage}"></td>
                 </tr>-->
            </table>

            <div class="mt-4">
                <h5>Output Log</h5>
                <pre class="bg-light p-3" th:text="${job.outputLog}"></pre>
            </div>

            <div class="mt-4" th:if="${job.errorLog != null}">
                <h5>Error Log</h5>
                <pre class="bg-light p-3 text-danger" th:text="${job.errorLog}"></pre>
            </div>

            <div class="mt-4">
                <a class="btn btn-secondary" th:href="@{/jobs}">Back to List</a>
                <a class="btn btn-primary ms-2" th:href="@{/jobs/{id}/trigger(id=${job.id})}">Trigger</a>
                <a class="btn btn-warning ms-2" th:href="@{/jobs/{id}/cancel(id=${job.id})}">Cancel</a>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>